<template>
	<view class="category-wrap" :data-theme="theme()" :class="theme() || ''">
		<!-- #ifdef APP-PLUS -->
		<header-bar></header-bar>
		<!-- #endif -->
		<!-- 搜索框 -->
		<view class="index-search-box-cate d-b-c search" id="searchBox" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;padding-top:' + topBarTop() + 'px'">
			<view class="index-search-cate t-c" @click="gotoSearch">
				<span class="icon iconfont icon-sousuo"></span>
				<text class="ml10">{{ searchName }}</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="wx-top-right"></view>
			<!-- #endif -->
		</view>
		<!--类别列表-->
		<view class="category-content">
			<!--一级分类 大图-->
			<view class="cotegory-type cotegory-type-1" v-if="showType == 10 && style == 3">
				<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
					<view class="list">
						<view class="item" v-for="(item, index) in listData" :key="index" @click="gotoList(item.categoryId)">
							<view class="pic"><image :src="hasImages(item)" mode="widthFix"></image></view>
							<view class="p-20-0 tc f28">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!--二级分类-->
			<view class="cotegory-type cotegory-type-3" v-if="style != 3">
				<view class="category-tab f-s-0" v-if="style == 2">
					<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
						<view :class="selectIndex == index ? 'item active' : 'item'" v-for="(item, index) in listData" :key="index" @click="selectCategory(index)">
							<text>{{ item.name }}</text>
						</view>
					</scroll-view>
				</view>

        <view class="category-tab f-s-0" v-if="style == 1 && showType == 20">
          <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
            <view :class="selectIndex == index ? 'item active' : 'item'" v-for="(item, index) in listData" :key="index" @click="selectCategory(index)">
              <text>{{ item.name }}</text>
            </view>
          </scroll-view>
        </view>
        <!--二级分类 小图-->
        <view class="cotegory-type cotegory-type-2 flex-1" v-if="style == 1 && showType == 20">
          <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
            <view class="list">
              <view class="item" v-for="(item, index) in childlist" :key="index"
                    @click="gotoList(item.categoryId)">
                <image :src="hasImages(item)" mode="widthFix"></image>
                <text>{{ item.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>

				<!--一级分类 小图-->
        <view class="cotegory-type cotegory-type-2 flex-1" v-if="style == 1 && showType == 10">
          <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
            <view class="list">
							<view class="item" v-for="(item, index) in listData" :key="index" @click="gotoList(item.categoryId)">
								<image :src="hasImages(item)" mode="widthFix"></image>
								<text>{{ item.name }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="category-content" v-if="style == 2">
					<scroll-view scroll-y="true" @scrolltolower="scrolltolower" class="scroll-Y scroll-3" :style="'height:' + scrollviewHigh + 'px;'">
						<view class="catescroll2-top" v-if="showType == 20 && style == 2">
							<view
								@click="changeCategory(item.categoryId)"
								class="catescroll2-top-item"
								:class="{ active: item.categoryId == categoryId }"
								v-for="(item, index) in childlist"
								:key="index"
							>
								{{ item.name }}
							</view>
						</view>
						
						<view
							class="product-item-2"
							@click="gotoPage('/pages/product/detail/detail?productId=' + item.productId)"
							v-for="(item, index) in productlist"
							:key="index"
						>
							<image class="product-image-2" :src="item.productImage" mode=""></image>
							<view class="flex-1 d-c d-b-s" style="height: 154rpx;">
								<view class="text-ellipsis-2 f28 gray3">{{ item.productName }}</view>
								<view class="theme-price f36 fb">
									<text class="f24">￥</text>
									{{ item.productPrice }}
								</view>
							</view>
						</view>
						<view class="d-c-c p30" v-if="productlist.length == 0 && !listLoadding">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂无相关记录哦</text>
						</view>
						<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
					</scroll-view>
				</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
import utils from '@/common/utils.js';
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore,
	},
	data() {
		return {
			loading: true,
			searchName: '搜索商品',
			/*展示方式*/
			showType: 3,
			style: 1,
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*数据*/
			listData: [],
			/*子类数据*/
			childlist: [],
			/*当前选中的分类*/
			selectIndex: 0,
			catename: '',
			productlist: [],
			page: 1,
			last_page: 0,
			categoryId: 0,
			no_more: false,
			listLoadding: true ,// 列表
			name: '',
		};
	},
	onLoad(e) {
		this.name = e.name
	},
	/**
	 * 设置分享内容
	 */
	onShareAppMessage() {
		let self = this;
		return {
			title: self.templet.shareTitle,
			path: '/pages/product/category?' + self.getShareUrlParams()
		};
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.toggleInit();
		this.getProduct();
	},
	// //触底刷新
	// onReachBottom() {
	// 	this.scrolltolowerFunc();
	// 	console.log('到底了')
	// },
	onPageScroll(detail) {
		console.log(detail, "detail")
		uni.pageScrollTo({
		scrollTop: detail.scrollTop - 25,
		duration: 100
		});
	},
	onShow() {
		this.getTabBarLinks();
	},
	mounted() {
		this.init();
		this.getData();
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.listLoadding) {
				return 1;
			} else {
				if (this.productlist.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	methods: {
		// 页面滚动触发
		scrolltolower(e) {
			// console.log(e, "ppppppp===")
			this.scrolltolowerFunc();
		},
		toggleInit() {
			this.page = 1;
			this.last_page = 0;
			this.no_more = false;
			this.product_list = [];
		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			if (self.page < self.last_page) {
				self.page++;
				self.getProduct();
			}
			self.no_more = true;
		},
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('#searchBox');
					view.boundingClientRect(data => {
						let h = self.phoneHeight - data.height;
						self.scrollviewHigh = h;
					}).exec();
				}
			});
		},

		/*判断是否有图片*/
		hasImages(e) {
		  if (e && e.imagePath != null) {
			return e.imagePath;
		  } else {
			return '';
		  }
		},

		/*获取数据*/
		getData() {
			let self = this;
			self.loading = true;
			self._get('product/category/index', {}, function(res) {
				self.listData = res.data.list;
				self.catename = self.listData[0].name;
				self.showType = res.data.template.categoryStyle;
				self.style = res.data.template.windStyle;
				if (self.style == 2) {
					if(self.name) {
						self.selectIndex = 3
					}
					//设置默认9.9 选中值
					self.categoryId = self.listData[0].categoryId
					self.getProduct();
				}
				if (self.listData[0].children) {
					self.childlist = self.listData[0].children;
					self.changeCategory(self.childlist[0].categoryId);
				}
				self.background = res.data.background;
				self.loading = false;
				
			});
		},
		changeCategory(e) {
			this.categoryId = e;
			this.productlist = [];
			this.page = 1;
			this.getProduct();
		},
		getProduct() {
			let self = this;
			let page = self.page;
			let categoryId = self.categoryId;
			let sortType = self.sortType;
			let sortPrice = self.sortPrice;
			self.listLoadding = true;
			self._postBody(
				'product/product/lists',
				{
					pageIndex: page || 1,
					categoryId,
					search: '',
					sortType: '',
					sortPrice: 0,
					list_rows: 20
				},
				function(res) {
					self.listLoadding = false;
					self.productlist = self.productlist.concat(res.data.records);
					self.last_page = res.data.lastPage;
					if (res.data.last_page <= 1) {
						self.no_more = true;
					}
				}
			);
		},
		/*选择分类*/
		selectCategory(e) {
			if (this.showType == 10) {
				this.selectIndex = e;
				this.catename = this.listData[this.selectIndex].name;
				this.changeCategory(this.listData[this.selectIndex].categoryId);
			} else {
				if (this.listData[e].children) {
					this.childlist = this.listData[e].children;
					this.selectIndex = e;
					this.catename = this.listData[this.selectIndex].name;
					this.changeCategory(this.childlist[0].categoryId);
				}
			}
		},
		hasSelect() {
			let self = this;
		},
		/*跳转产品列表*/
		gotoList(e) {
			let categoryId = e;
			let sortType = 'all';
			let search = '';
			let sortPrice = 0;
			this.gotoPage('/pages/product/list/list?categoryId=' + categoryId + '&sortType=' + sortType + '&search=' + search + '&sortPrice=' + sortPrice);
		},

		wxGetUserInfo: function(res) {
			if (!res.detail.iv) {
				uni.showToast({
					title: '您取消了授权,登录失败',
					icon: 'none'
				});
				return false;
			}
		},

		/*跳转搜索页面*/
		gotoSearch() {
			this.gotoPage('/pages/product/search/search');
		}
	}
};
</script>

<style lang="scss">
@import '@/common/mixin.scss';
#searchBox {
	width: 100%;
}
page {
	height: 0;
}
.foot_ {
	height: 98rpx;
	width: 100%;
}

.cotegory-type {
	line-height: 40rpx;
	background: #ffffff;
}
.search {
	margin-right: 50rpx;
}

.cotegory-type image {
	width: 100%;
}

.cotegory-type-1 .list {
	padding: 20rpx;
}

.cotegory-type-1 .list .item {
	margin-top: 30rpx;
}

.cotegory-type-1 .list .item .pic {
	// border: 1px solid #e3e3e3;
	width: 710rpx;
	height: auto;
	overflow: hidden;
	border-radius: 8px;
}

.cotegory-type-1 .list .item image {
	width: 100%;
	height: 100%;
}

.cotegory-type-2 .list,
.cotegory-type-3 .list {
	padding: 0 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.cotegory-type-2 .list .item,
.cotegory-type-3 .list .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cotegory-type-3 .list .item {
	width: 140rpx;
	height: 200rpx;
	margin-top: 40rpx;
	margin-right: 20rpx;
	font-size: 24rpx;
}

.cotegory-type-2 .list .item {
	padding: 0 16rpx;
	width: 33.3%;
	margin: 0;
	margin-bottom: 16rpx;
	height: 300rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.cotegory-type-2 .list .item image {
	width: 100%;
	margin-bottom: 20rpx;
}

.cotegory-type-3 {
	display: flex;
}

.cotegory-type-3 .category-tab {
	width: 200rpx;
	background: rgba(0,0,0,.06);
}

.cotegory-type-3 .category-tab .item {
	padding: 40rpx 0;
	font-size: 26rpx;
	text-align: center;
	color: #666666;
	font-weight: bold;
}

.cotegory-type-3 .category-tab .item.active {
	position: relative;
	color: #f9402f;
	font-size: 30rpx;
}

.cotegory-type-3 .category-tab .item.active::after {
	position: absolute;
	content: '';
	top: 40rpx;
	bottom: 40rpx;
	left: 0;
	width: 6rpx;
	height: 22rpx;
	margin: auto;
	@include background_linear('titleft1', 'titleft2', 180deg, 0%, 100%);
}

.cotegory-type-3 .category-content {
	flex: 1;
	// padding: 0 20rpx;
}

.cotegory-type-3 .list .item:nth-child(3n) {
	margin-right: 0;
}

.cotegory-type-3 .list .item image {
	width: 140rpx;
	height: 140rpx;
}

.cotegory-type-3 .list .item .type-name {
	display: block;
	margin-top: 20rpx;
	height: 80rpx;
	line-height: 60rpx;
	text-overflow: ellipsis;
	width: 100%;
	color: #818181;
	font-size: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
}

.scroll-3 {
	// position: absolute;
	background: #ffffff;
	border-radius: 12px;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
}

.catename {
	padding-top: 10rpx;
	line-height: 60rpx;
	border-bottom: 1rpx solid #eeeeee;
}
.catescroll2-top {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 20rpx 0;
	padding-left: 20rpx;
}
.catescroll2-top-item {
	// min-width: 142rpx;
	padding: 0 23rpx;
	height: 58rpx;
	background: #f6f6f6;
	border: 1rpx solid #f6f6f6;
	border-radius: 29rpx;
	margin-right: 14rpx;
	line-height: 58rpx;
	color: #666;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;
}
.catescroll2-top-item.active {
	color: #fff;
	@include background_color('background_color');
	border: 1rpx solid #ee252a;
	@include border_color('border_color');
}
.product-item-2:first-child {
	margin-top: 20rpx;
}
.product-item-2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 20rpx;
	margin-bottom: 25rpx;
	.product-image-2 {
		width: 194rpx;
		height: 194rpx;
		display: block;
		margin-right: 20rpx;
	}
}
.uni-scroll-view::-webkit-scrollbar,
.catescroll2-top::-webkit-scrollbar {
	/*滚动条整体样式*/
	/*高宽分别对应横竖滚动条的尺寸*/
	display: block;
	width: 0rpx !important;
	height: 0rpx !important;
	-webkit-appearance: default-button;
}
.uni-scroll-view::-webkit-scrollbar-thumb,
.catescroll2-top::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background-color: #909399;
}
.uni-scroll-view::-webkit-scrollbar-track,
.catescroll2-top::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ededed;
	border-radius: 10px;
}
</style>
